<template>
    <div class="CardManage">
        <div class="crumbs">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>人员管理</el-breadcrumb-item>
                <el-breadcrumb-item>学生管理</el-breadcrumb-item>
                <el-breadcrumb-item>卡号管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-page-header @back="goBack" content="卡号管理">
            </el-page-header>
            <div class="card_body">
                <el-form :model="cardForm" label-position="right">
                    <el-row :gutter="18">
                        <el-col :span="10" v-for="(item, index) in cardList" :key="index" >
                            <el-form-item :label="item.label" label-width="120px">
                                <el-input :disabled="item.status" v-model="item.code" autocomplete="off" @change="change(item.id, item.code)"></el-input>
                                <el-button type="text" @click="item.status = false">修改</el-button>
                                <el-button type="text" @click="save(item.id, item.code)">保存</el-button>
                                <p v-if="false">{{item.id}}</p>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="addCard">
                    <el-button type="success" @click="cardVisible = true">添 加</el-button>
                    <el-button>重 置</el-button>
                </div>
            </div>
        </div>
        <!-- 添加卡号模态框 -->
        <el-dialog title="添加班级信息" custom-class="editClass" :visible.sync="cardVisible"
            :close-on-press-escape="false" :close-on-click-modal="false">
            <div class="form">
                <el-form :mode="addForm" label-position="right">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="卡号">
                                <el-input v-model="addInput" placeholder="请输入卡号"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="addCard">
                    <el-button @click="cardVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit">提 交</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        SELECT_CARD,
        UPDATE_CARD,
        INSERT_CARD
    } from '@/api/api.js'
    export default {
        name: 'CardManage',
        data() {
            return {
                cardForm: {},
                addForm: {},
                studentId: '',
                cardList: [],
                cardVisible: false,
                addInput: '',
                disabled: true
            }
        },
        created() {
            this.getParam()
        },
        mounted() {
            setTimeout(() => {
                this.selectCard()
            }, 100);
        },
        methods: {
            goBack() {

            },
            getParam() {
                this.studentId = this.$route.query.studentId
            },
            // 监听input
            change(id, code) {
                console.log(id, code)
            },
            // 添加卡号
            async submit() {
                let that = this
                let formData = new FormData()
                formData.append("studentId", that.studentId)
                formData.append("code", that.addInput)
                await that.$POST(`${INSERT_CARD}`, formData)
                .then(res => {
                    if(res.code == 200) {
                        that.$message.success(res.msg)
                        that.cardVisible = false
                        that.selectCard()
                    } else {
                        that.$message.error(res.msg)
                    }
                })
            },
            // 修改卡号
            async save(id, code) {
                let that = this
                let formData = new FormData()
                formData.append("id", id)
                formData.append("code", code)
                await that.$POST(`${UPDATE_CARD}`, formData)
                .then(res => {
                    if(res.code == 200) {
                        that.$message.success(res.msg)
                        that.selectCard()
                    } else {
                        that.$message.error(res.msg)
                    }
                })
            },
            // 查询卡号
            async selectCard() {
                let that = this
                console.log(this.studentId)
                await that.$GET(`${SELECT_CARD}`, {
                        studentId: that.studentId
                    })
                    .then(res => {
                        if (res.code == 200) {
                            let data = []
                            for(let i = 0; i < res.data.length; i++) {
                                let obj = {}
                                obj.id = res.data[i].id
                                obj.label = `卡号${i + 1}：`
                                obj.status = true
                                obj.code = res.data[i] != undefined ? res.data[i].code : ''
                                data[i] = obj
                            }
                            that.cardList = data
                        }
                    })
            }
        }
    }
</script>
<style lang="scss">
    .el-page-header__content {
        font-size: 16px;
    }
    .card_body {
        padding-top: 30px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .addCard {
        text-align: center
    }
</style>